<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>部门列表</span>
            </div>
          </template>
          <el-tree
            :data="departments"
            :props="defaultProps"
            @node-click="handleDepartmentSelect"
            default-expand-all
          />
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>{{ currentDepartment ? currentDepartment.name : '全部' }}部门日程</span>
              <el-button type="primary" size="small" @click="handleAddSchedule">新建部门日程</el-button>
            </div>
          </template>
          <el-calendar v-model="currentDate">
            <template #dateCell="{ data }">
              <div class="calendar-day">
                <div class="day-number">{{ data.day.split('-').slice(-1)[0] }}</div>
                <div class="schedule-list">
                  <div
                    v-for="schedule in getSchedulesByDate(data.day)"
                    :key="schedule.id"
                    class="schedule-item"
                    :class="schedule.type"
                    @click="handleViewSchedule(schedule)"
                  >
                    {{ schedule.title }}
                  </div>
                </div>
              </div>
            </template>
          </el-calendar>
        </el-card>
      </el-col>
    </el-row>

    <!-- 新建/编辑部门日程对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="500px"
    >
      <el-form :model="scheduleForm" :rules="rules" ref="scheduleFormRef" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="scheduleForm.title" placeholder="请输入日程标题" />
        </el-form-item>
        <el-form-item label="部门" prop="departmentId">
          <el-cascader
            v-model="scheduleForm.departmentId"
            :options="departments"
            :props="{
              checkStrictly: true,
              label: 'name',
              value: 'id',
              emitPath: false
            }"
            placeholder="请选择部门"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker
            v-model="scheduleForm.date"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="时间" prop="time">
          <el-time-picker
            v-model="scheduleForm.time"
            format="HH:mm"
            placeholder="选择时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="scheduleForm.type" placeholder="请选择日程类型" style="width: 100%">
            <el-option label="会议" value="meeting" />
            <el-option label="培训" value="training" />
            <el-option label="活动" value="activity" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="scheduleForm.remark"
            type="textarea"
            placeholder="请输入备注信息"
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmitSchedule">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const currentDate = ref(new Date())
const dialogVisible = ref(false)
const dialogTitle = ref('新建部门日程')
const scheduleFormRef = ref(null)
const currentDepartment = ref(null)

// 模拟部门数据
const departments = ref([
  {
    id: 1,
    name: '总经办',
    children: []
  },
  {
    id: 2,
    name: '人力资源部',
    children: []
  },
  {
    id: 3,
    name: '技术部',
    children: [
      {
        id: 31,
        name: '开发组'
      },
      {
        id: 32,
        name: '测试组'
      }
    ]
  }
])

const defaultProps = {
  children: 'children',
  label: 'name'
}

const scheduleForm = ref({
  title: '',
  departmentId: null,
  date: '',
  time: '',
  type: '',
  remark: ''
})

const rules = {
  title: [{ required: true, message: '请输入日程标题', trigger: 'blur' }],
  departmentId: [{ required: true, message: '请选择部门', trigger: 'change' }],
  date: [{ required: true, message: '请选择日期', trigger: 'change' }],
  time: [{ required: true, message: '请选择时间', trigger: 'change' }],
  type: [{ required: true, message: '请选择日程类型', trigger: 'change' }]
}

// 模拟日程数据
const schedules = ref([])

const handleDepartmentSelect = (data) => {
  currentDepartment.value = data
  // TODO: 根据部门ID获取日程数据
}

const getSchedulesByDate = (date) => {
  return schedules.value.filter(schedule => {
    return schedule.date === date && 
      (!currentDepartment.value || schedule.departmentId === currentDepartment.value.id)
  })
}

const handleAddSchedule = () => {
  dialogTitle.value = '新建部门日程'
  scheduleForm.value = {
    title: '',
    departmentId: currentDepartment.value?.id || null,
    date: '',
    time: '',
    type: '',
    remark: ''
  }
  dialogVisible.value = true
}

const handleViewSchedule = (schedule) => {
  dialogTitle.value = '编辑部门日程'
  scheduleForm.value = { ...schedule }
  dialogVisible.value = true
}

const handleSubmitSchedule = async () => {
  if (!scheduleFormRef.value) return

  await scheduleFormRef.value.validate((valid) => {
    if (valid) {
      // TODO: 调用API保存部门日程
      ElMessage.success('保存成功')
      dialogVisible.value = false
    }
  })
}
</script>

<style lang="scss" scoped>
.calendar-day {
  height: 100%;
  
  .day-number {
    font-size: 14px;
    margin-bottom: 5px;
  }

  .schedule-list {
    .schedule-item {
      font-size: 12px;
      padding: 2px 4px;
      margin-bottom: 2px;
      border-radius: 2px;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &.meeting {
        background-color: #e6f7ff;
        color: #1890ff;
      }

      &.training {
        background-color: #f6ffed;
        color: #52c41a;
      }

      &.activity {
        background-color: #fff7e6;
        color: #fa8c16;
      }

      &.other {
        background-color: #f9f0ff;
        color: #722ed1;
      }
    }
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>